<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .my-div {
        height: 30px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div>姓名：{{name}}</div>
      <div>班级：{{classRoom}}</div>
      <div>button：{{html}}</div>
      <div v-html="html"></div>
      <button onclick="hi()">打招呼</button>
      <button onclick="update()">修改班级</button>
      <a v-bind:href="baidu">百度一下</a>
      <div
        v-bind:class="cla"
        :title="title.length > 5 ? title.substring(0, 5) : title"
        :id="'div' + id"
      ></div>
      <a :[attributeName]="url"> aaaaaaa </a>
    </div>

    <!-- vue js -->
    <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>

    <script>
      // createApp = Vue.createApp
      const { createApp } = Vue;

      const options = {
        data() {
          return {
            msg: "hello VUE",
            name: "张三",
            classRoom: "开发喵",
            html: "<button>按钮</button>",
            baidu: "https://www.baidu.com",
            cla: "my-div",
            title: "标题",
            id: 1,
            attributeName: "url",
            url: "",
          };
        },
        methods: {
          // study: function(){}
          study() {
            // this 表示 vue 对象
            alert(this.name + "正在" + this.classRoom + "好好学习!");
          },
        },
      };

      // vue3
      var vm = Vue.createApp(options).mount("#box");

      //定义打招呼方法
      function hi() {
        vm.study();
      }

      //定义修改班级
      function update() {
        vm.classRoom = "云创动力";
      }
    </script>
  </body>
</html>
